<template>
	<view class="contentBody">
		<view class="header">

			<u-button @click="addAddress" type="primary">添加新地址</u-button>
		</view>
		<!-- {{addresses}} -->
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(address, index) in addresses" :key="address.id">
				<view class="address-content">
					<view class="address">
						<text>{{address.id}}/{{ address.name }} ({{ address.phone }})</text>
						<text>{{ address.site }}</text>
						<text>{{ address.provinceName }} {{ address.cityName }} {{ address.areaName }}</text>
						<text class="tag">{{ address.tag }}</text>
					</view>
					
					 <view class="delBtn">
					 	<u-button text="编辑" type="error" @tap="editAddress(address.id)">编辑</u-button>
					 </view>
					<view class="delBtn">
						<u-button text="删除" type="error" @tap="deleteConfirm(address.id)">删除</u-button>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addresses: [
					// 示例地址数据
					{
						id: 1,
						name: '张三',
						phone: '13800000000',
						site: '深圳市福田区',
						provinceName: '广东省',
						cityName: '深圳市',
						areaName: '福田区',
						tag: '默认'
					},
					{
						id: 2,
						name: '李四',
						phone: '13900000000',
						site: '广州市天河区',
						provinceName: '广东省',
						cityName: '广州市',
						areaName: '天河区',
						tag: '家'
					}
				]
			};
		},
		onLoad() {
			this.getAddress()
		},
		methods: {
			async getAddress() {
				let response = await this.$api.getAddress();
				this.addresses = response.data;
			},
			scrolltolower() {
				// 处理滚动到底部加载更多地址的逻辑
				console.log('加载更多地址');
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/AddressForm'
				})
			},
			editAddress(id) {
				uni.navigateTo({
					url: '/pages/address/AddressForm?id='+id
				})
				// 编辑地址逻辑
				console.log('编辑地址:', id);
			},
			async deleAddress(id) {
				let response = await this.$api.delAddress({
					id: id
				});
			},
			deleteConfirm(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除这条记录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');

							that.deleAddress(id)

							// 删除地址逻辑
							console.log('删除地址 ID:', id);
							// 在这里可以实现删除操作，例如从 addresses 数组中移除
							that.addresses = that.addresses.filter(address => address.id !== id);


							// 在这里执行删除操作
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	.header {
		padding: 10rpx;
	}

	.address-content {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 让内容和按钮分开 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 10px 0;
		/* 上下内边距 */
		border-bottom: 1px solid #eaeaea;
		/* 添加分隔线 */
	}

	.address {
		flex: 1;
		/* 地址内容占据剩余空间 */
	}

	.tag {
		color: #999;
		/* 标签颜色 */
	}

	.delBtn {
		margin-left: 10px;
		/* 删除按钮左边距 */
	}
</style>